<template>
  <el-dialog
    :visible.sync="data.state"
    :fullscreen="data.full"
    :width="data.width?data.width:'600px'"
    :before-close="handleClose"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="roleForm"
      :rules="data.rules"
      :model="data.forms"
      :label-width="data.labelWidth?data.labelWidth+'px':'100px'"
      :label-position="labelPosition?labelPosition:'right'"
    >
      <div
        class="pupBox" :style="{
          height:pupHeight,
       }"
      >
        <div class="pupTitle">
          <h3>{{data.title}}<span class="c1" v-if="data.titleSub">【{{data.titleSub}}】</span>{{pupTitle}}</h3>
          <i class="iconfont icon-guanbi"  @click="handleCloseButton()"  @dblclick.stop/>
        </div>
        <div class="pupCenter">
          <div class="pupCenter-left" :class="leftWidth?'w'+leftWidth:''" v-if="$scopedSlots.left">
            <div class="pupCenter-hd" v-if="leftTitle">
              <h3>{{leftTitle}}</h3>
            </div>
            <div class="pupCenter-bd">
              <el-scrollbar>
                <slot name="left"/>
              </el-scrollbar>
            </div>
          </div>
          <div class="pupCenter-content ">
            <div class="pup-menu" v-if="$scopedSlots.contentMenu">
              <slot name="contentMenu"/>
            </div>
            <div class="pup-head" v-if="$scopedSlots.contentHead">
              <slot name="contentHead"/>
            </div>
            <div class="pup-content">
              <el-scrollbar>
                <div class="p16" :class="search?'pt0':''">
                  <slot/>
                </div>
              </el-scrollbar>
            </div>
          </div>
          <div class="pupCenter-right" :class="rightWidth?'w'+rightWidth:''" v-if="$scopedSlots.right">
            <div class="pupCenter-hd" v-if="rightTitle">
              <h3>{{rightTitle}}</h3>
            </div>
            <div class="pupCenter-bd">
              <el-scrollbar>
                <slot name="right"/>
              </el-scrollbar>
            </div>
            <div class="pupCenter-footer" v-if="$scopedSlots.rightFooter">
              <slot name="rightFooter"/>
            </div>
          </div>
        </div>
        <div class="pupFoot" v-if="$scopedSlots.footer">
          <slot name="footer"/>
        </div>
        <div class="pupFoot" v-if="!data.footHide && !$scopedSlots.footer">
          <div class="pupFootL">
            <slot name="footL"/>
          </div>
          <div class="pupFootR">
            <el-button
              @click="handleCloseButton()"
              @dblclick.stop
            >
              <p>取消</p>
            </el-button>
            <el-button
              type="primary"
              @click="submitButton(data)"
              :loading="data.loadingBtn"
              @dblclick.stop>
              <p>确认</p>
            </el-button>
            <slot name="btn"/>
          </div>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: "PupFormBox",
  props: [
    'data',//
    'leftWidth',//右菜单宽度
    'leftTitle',//右菜单标题
    'rightWidth',//右菜单宽度
    'rightTitle',//右菜单标题
    'search',//搜索
    'labelPosition',//表单位置
  ], // 获取父组件数据
  components: {

  },
  created() {
    if(this.data.forms && !this.data.copyForm){
      this.data.copyForm={}
      this.data.copyForm = JSON.parse(JSON.stringify(this.data.forms))
    }
    this.data.loadingBtn=false
  },
  data() {
    return {

    };
  },
  methods: {
    //返回上一页
    back() {
      this.$router.go(-1)
    },
    handleClose(done){
      done()
      this.handleCloseButton()
    },
    //弹窗关闭事件
    handleCloseButton(){
      this.$emit('closeButton')
      let data=this.data
      data.loadingBtn=false
      data.state = false
      this.clearData()
    },
    //
    clearData(){
      if (!this.data.state){
        this.data.forms = JSON.parse(JSON.stringify(this.data.copyForm))
        this.$refs.roleForm.resetFields();
      }
    },
    //搜索
    searchButton(val){
      this.$emit('searchButton',val)
    },
    //提交
    submitButton(pup){
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          this.data.loadingBtn=true
          this.$emit('submitButton',pup)
        }
      });
    }
  },
  computed: {
    //获取高度
    pupHeight(){
      let pupHeight=''
      let data=this.data
      let wHeight=document.body.offsetHeight
      if (data.full){
        pupHeight='100vh'
      }else{
        if (data.height){
          let height=data.height
          if (typeof data.height==='string'){
            if (height.match(/\d+/g)[0]<wHeight){
              pupHeight=data.height
            }else{
              pupHeight='100vh'
            }
          }
        }else{
          pupHeight='auto'
        }
      }
      return pupHeight
    },
    //获取副标题
    pupTitle(){
      let pupTitle=''
      let titleId=this.data.titleId
      if (titleId===0){
        pupTitle='-查看'
      }else if (titleId===1){
        pupTitle='-新建'
      }else if (titleId===2){
        pupTitle='-编辑'
      }else if (titleId===3){
        pupTitle='-审核'
      }
      return pupTitle
    },
  },
};
</script>
<style  lang="scss">
.el-dialog{
  margin: 0!important;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
  box-shadow: 0 1px 10px 0 rgba(0,0,0,.2);
  border-radius: 8px;
  &.is-fullscreen{
    border-radius: 0;
  }
  .el-dialog__body{
    padding:0;
  }
  .el-dialog__header{
    padding: 0;
    display: none;
  }
  .el-dialog__footer{
    padding: 0;
    display: none;
  }
}
.pupBox{
  overflow: hidden;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  >*{
    &:not(:last-child){
      &:not(.notBorder){
        border-bottom: 1px #eee solid;
      }
    }
  }
  .pupTitle{
    padding: 0 8px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    .icon-guanbi{
      width: 32px;
      height: 32px;
      border-radius:2px;
      overflow: hidden;
      &:hover{
        background: #e13335;
        color: #fff;
      }
    }
  }
  .pupSearch{
    padding: 16px;
  }
  .pupCenter{
    overflow: hidden;
    flex: 1;
    display: flex;
    >*{
      &:not(:last-child){
        border-right:1px #E6E6E6 solid;
      }
    }
    .pupCenter-content{
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .pup-head{
        padding:10px 16px 0;
      }
      .pup-content{
        flex: 1;
        overflow: hidden;
      }
    }
    .pupCenter-right,.pupCenter-left{
      min-width: 120px;
      max-width: 30%;
      display: flex;
      flex-direction: column;
      >*{
        &:not(:last-child){
          border-bottom: 1px #e6e6e6 solid;
        }
      }
      .pupCenter-hd{
        height:38px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        background: #f5f7fa;
      }
      .pupCenter-bd{
        flex: 1;
        overflow: hidden;
      }
      .pupCenter-footer{
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 16px;
      }
    }
  }
  .pupFoot{
    padding: 0 8px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:48px;
    >*{
      display: flex;
      align-items: center;
      &:not(:last-child){
        margin-right: 16px;
      }
    }
    .pupFootL{
      flex: 1;
    }
    .pupFootR{
      .el-button{
        height: 32px;
      }
    }
  }
}
</style>
